<template>
    <div class="f-e">
        <div class="f-e">
            <span v-if="!hideSplicing" class="splicing-border-bottom"/>
            <el-tabs v-model="tabActive" type="card" @tab-change="handleChangeTabs">
                <el-tab-pane v-for="row in tabs" :key="row.value" :label="row.label" :name="row.value"/>
            </el-tabs>
            <span class="splicing-border-bottom"/>
        </div>
        <div class="right-border-b">
            <slot/>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { computed, PropType, ref, watch } from "vue";

    const props = defineProps({
        modelValue: {
            type: [Number, String] as PropType<string | number>,
            default: '',
        },
        hideSplicing: {
            type: Boolean,
            default: false
        },
        list: {
            type: Array as PropType<ObjValueAny[]>,
            default: () => {
                return []
            }
        }
    });
    const tabs = computed(() => {
        const _list = JSON.parse(JSON.stringify(props.list));
        for (let row of _list) {
            if (row.hasOwnProperty('count')) {
                row.label = `${row.label}(${row.count})`;
            }
        }
        return _list
    })
    let tabActive = ref<string | number>('');
    const emit = defineEmits(['update:modelValue', 'change']);
    watch(() => props.modelValue, (newVal: string | number) => {
        tabActive.value = newVal
    }, {
        immediate: true
    });
    const handleChangeTabs = (id: number) => {
        emit('update:modelValue', id);
        emit('change', id);
    }
</script>

<style scoped lang="scss">
    :deep(.el-tabs__header.is-top) {
        margin-bottom: 0;
    }

    .splicing-border-bottom {
        width: 10px;
        border-bottom: 1px solid var(--el-border-color-light);
    }

    .right-border-b {
        width: 100%;
        border-bottom: 1px solid var(--el-border-color-light);
    }
</style>